import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Radio, Modal, Cascader,Table, Tag, Card, Row, Col, Select, DatePicker,Button,Icon } from 'antd'
import city from '../../utils/city'
import  styles from './Modal.less'
import moment from 'moment'

const FormItem = Form.Item
const {RangePicker} = DatePicker
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 24,
      offset: 0,
    },
  },
}

const gridStyle = {
  width: '16.6666%',
  textAlign: 'center',
};

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      data.address = data.address.join(' ')
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  const handleChange = () => {
    console.log("run")
  }

  const onChange = () => {
    console.log("run")
  }

  const options = [
    { label: '发送消息', value: '发送消息' },
    { label: '跳转网页', value: '跳转网页' },
    { label: '扫码', value: '扫码' },
    { label: '扫码（等待信息）', value: '扫码（等待信息）' },
    { label: '地理位置', value: '地理位置' },
    { label: '拍照发图', value: '拍照发图' },
    { label: '拍照相册', value: '拍照相册' },
    { label: '相册发图', value: '相册发图' },
  ];

  return (
    <Modal {...modalOpts}>
      <Input style={{width:'100%'}} placeholder="给菜单组起个名字吧！以便查找" />
      <div className={styles.comments}>
        <Row gutter={16}>
          <Col span={8}>
            <Card title="预览" bordered={true}>
              <div className>
                <div style={{backgroundColor:'#EBEBEB',height:"480px",position:'relative'}}>
                  <div><img style={{width:'100%',height:'48px'}} src={'/images/top.jpg'}/></div>
                  <div style={{position:'absolute',bottom:'0px'}}><img style={{width:'100%',height:'48px',display:'absolute',button:'0px'}} src={'/images/button.jpg'}/></div>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={16}>
            <Card title="当前菜单" bordered={true} extra={<Button type="primary" ghost>删除菜单</Button>}>
              <Form layout="horizontal">
                <FormItem label="菜单名称" hasFeedback {...formItemLayout}>
                  { <div>
                    <Input />
                  </div>
                  }
                </FormItem>
                <FormItem label="菜单内容" hasFeedback {...formItemLayout}>
                  { <div>
                    <RadioGroup options={options}  />
                  </div>
                  }
                </FormItem>
                <FormItem {...tailFormItemLayout}>
                  <Card title="群发内容" noHovering bodyStyle={{ padding: 0 }}>
                    <Card.Grid style={gridStyle}><Icon type="book" />图文</Card.Grid>
                    <Card.Grid style={gridStyle}><Icon type="edit" />文字</Card.Grid>
                    <Card.Grid style={gridStyle}><Icon type="picture" />图片</Card.Grid>
                    <Card.Grid style={gridStyle}><Icon type="customer-service" />音乐</Card.Grid>
                    <Card.Grid style={gridStyle}><Icon type="sound"/>语音</Card.Grid>
                    <Card.Grid style={gridStyle}><Icon type="video-camera" />视频</Card.Grid>
                  </Card>
                </FormItem>
              </Form>
            </Card>
          </Col>
        </Row>
      </div>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
